<template>
  <div>
    <nav-bar title="类别统计"></nav-bar>
    <div class="typeStatistical center maxinBox backgroundfff">
      <van-row class="tableTitle">
        <van-col :span="8">问题类型</van-col>
        <van-col :span="8">问题数量</van-col>
        <van-col :span="8">整改完成率</van-col>
      </van-row>
      <van-row class="tableContent" v-for="(item, index) in dataList" :key="index">
        <van-col :span="8">{{item.categoryName}}</van-col>
        <van-col :span="8">{{item.count}}</van-col>
        <van-col :span="8">{{item.rate}}%</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import realTimeInspectionAPI from '../../../../api/workAPI/realTimeInspectionAPI.js'
  export default {
    data() {
      return {
        dataList: []
      }
    },
    methods:{
      getRealTimeStatistical() {
        realTimeInspectionAPI.getRealTimeStatistical(1).then(res => {
          this.dataList = res
        })
      }
    },
    mounted() {
      this.getRealTimeStatistical()
    }
  }
</script>

<style scoped lang="scss">
  .typeStatistical{
    font-size: 0.875rem;
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      color: #999;
    }
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
  }
</style>
